<template>
    <div class="leader">
        <div class="data_list">
            <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                <el-table-column align="left" prop="id" :label="$t('common.serialNumber')"></el-table-column><!--序号-->
                <el-table-column align="left" prop="name" :label="$t('common.accountName')"></el-table-column><!--账号名称-->
                <el-table-column align="left" prop="typeName" :label="$t('common.roleType')"><!--角色类型-->
                    <template slot-scope="scope">{{ $root.local == 'zhCN' ? scope.row.typeName : scope.row.typeIdName}}</template>
                </el-table-column>
                <el-table-column align="left" :label="$t('authority.accountStatus')" prop="roleName"><!--账号状态-->
                    <template slot-scope="scope">{{ scope.row.isDelete == '0' ? $t('common.enable') : $t('common.close')}}</template>
                </el-table-column>
            </el-table><!--end table-->
        </div>

        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';

    export default {
        name: 'captain',
        props: {
            activeTab: {
                type: String,
                required: true
            },
            searchForm: {
                type: Object,
                required: true
            }
        },
        components: {
            Pagination
        },
        mixins: [mixin],
        data() {
            return {
                thisRoleType: 6,
                isListening: false
            };
        },
        watch: {
            activeTab(val) {
                if ('leader' === val) {
                    this.page.currentPage = 1;
                    this.getTableData();
                }
            },
            'searchForm.search'(val) {
                if (val && this.activeTab === 'leader') {
                    this.page.currentPage = 1;
                    this.getTableData();
                }
            }
        },
        methods: {
            getTableData(page = this.page) {
                const params = {
                    type: this.thisRoleType,
                    name: this.searchForm.accountName,
                    isDelete: this.searchForm.isDelete,
                    leaderId: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                this.$api.authorityManage.getAllAuditorInfo(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.tableData = data.data;
                        this.page.recordsTotal = data.pageCount;
                        if (this.searchForm.search) {
                            this.$emit('search', this.searchForm);
                        }
                        this.tableMaxHeight = window.document.body.clientHeight - 265;
                    }
                });
            }
        },
        created() {
            if (this.activeTab === 'leader') {
                this.getTableData();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .data_list {
        background-color: #fff;
        padding: 10px 16px;
    }
</style>
